<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dom查询</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册页面加载里面嵌套了 点击事件
        window.onload = function () {
            //1.查找#bj节点
            document.getElementById("btn01").onclick = function () {
                var bj = document.getElementById("bj");
                alert(bj.innerHTML)
            }

            //2.查找所有li节点
            var btn02Ele = document.getElementById("btn02");
            btn02Ele.onclick = function () {
                var lis = document.getElementsByTagName("li");
                alert(li.length)
            };

            //3.查找name=gender的所有节点
            var btn03Ele = document.getElementById("btn03");
            btn03Ele.onclick = function () {
                var genders = document.getElementsByName("gender");
                alert(genders.length)
            };

            //4.查找#city下所有li节点
            var btn04Ele = document.getElementById("btn04");
            btn04Ele.onclick = function () {
                //1 获取 id 为 city 的节点
                //2 通过 city 节点.getElementsByTagName 按标签名查子节点
                var citylis = document.getElementById("city").getElementsByTagName("li");
                alert(citylis.length)
            };

            //5.返回#city的所有子节点
            var btn05Ele = document.getElementById("btn05");
            btn05Ele.onclick = function () {
                //1 获取 id 为 city 的节点
                // 2 通过 city 获取所有子节点
                //注意每个空白字符也算是一个节点
                var citysons = document.getElementById("city").childNodes;
                alert(citysons.length)
            };

            //6.返回#phone的第一个子节点(空白)
            var btn06Ele = document.getElementById("btn06");
            btn06Ele.onclick = function () {
                // 查询 id 为 phone 的节点
                var phonefirstChild = document.getElementById("phone").firstChild;
                alert(phonefirstChild.innerHTML);
                alert(document.getElementById("phone").firstChild.innerHTML);
            };

            //7.返回#bj的父节点
            var btn07Ele = document.getElementById("btn07");
            btn07Ele.onclick = function () {
                //1 查询 id 为 bj 的节点
                //2 bj 节点获取父节点
                var bjparentNode = document.getElementById("bj").parentNode;
                alert(bjparentNode.innerHTML)
            };

            //8.返回#android的前一个兄弟节点
            var btn08Ele = document.getElementById("btn08");
            btn08Ele.onclick = function () {
                // 获取 id 为 android 的节点
                // 通过 android 节点获取前面兄弟节点
                var apreviousSibling = document.getElementById("android").previousSibling;
                alert(apreviousSibling.innerHTML)
            };

            //9.读取#username的value属性值
            var btn09Ele = document.getElementById("btn09");
            btn09Ele.onclick = function () {
                alert(document.getElementById("username").value);
            };

            //10.设置#username的value属性值
            var btn10Ele = document.getElementById("btn10");
            btn10Ele.onclick = function () {
                document.getElementById("username").value= "智哥你真牛逼！";
            };

            //11.返回#bj的文本值
            var btn11Ele = document.getElementById("btn11");
            btn11Ele.onclick = function () {
                var bjinnerText = document.getElementById("bj").innerText;
                alert(bjinnerText);
                // alert(document.getElementById("city").innerHTML);
            };
        };
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款单机游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br/>
        <br/>

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone">
            <li>IOS</li>
            <li id="android">Android</li>
            <li>Windows Phone</li>
        </ul>
    </div>

    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">查找#bj节点</button>
    </div>
    <div>
        <button id="btn02">查找所有li节点</button>
    </div>
    <div>
        <button id="btn03">查找name=gender的所有节点</button>
    </div>
    <div>
        <button id="btn04">查找#city下所有li节点</button>
    </div>
    <div>
        <button id="btn05">返回#city的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回#phone的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回#bj的父节点</button>
    </div>
    <div>
        <button id="btn08">返回#android的前一个兄弟节点</button>
    </div>
    <div>
        <button id="btn09">返回#username的value属性值</button>
    </div>
    <div>
        <button id="btn10">设置#username的value属性值</button>
    </div>
    <div>
        <button id="btn11">返回#bj的文本值</button>
    </div>
</div>
</body>
</html>